﻿@model SMECustomerWebsite.Models.ViewModels.CustomerManager.CustomerPortfolioViewModel

@Html.Action("SubMenuCustomer", "System")
@Html.Action("CustInfo", "System")
<!-- start accordion -->
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>@SMECustomerWebsite.Core.Resources.Resource.YourCust</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @switch (Model.CurrentUser.GroupIdentifier)
                    {
                        case "1":
                            <table id="cm-customer-new" class="table custom_table table-bordered table-striped jambo_table">
                                <thead class="headings" id="tbl_headings">
                                    <tr>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper()</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                        <th class="column-title">DAO</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                        <th class="column-title">TOI @DateTime.Now.AddYears(-1).Year</th>
                                        <th class="column-title">TOI AVG @DateTime.Now.AddYears(-1).Year</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            break;
                        case "2":
                        <table id="cm-customer-new" class="table custom_table table-bordered table-striped jambo_table">
                            <thead class="headings" id="tbl_headings">
                                <tr>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                    <th class="column-title">DAO</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">TOI @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">TOI AVG @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        case "3":
                        <table id="cm-customer-new" class="table custom_table table-bordered table-striped jambo_table">
                            <thead class="headings" id="tbl_headings">
                                <tr>
                                    <th class="column-title">DAO</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">TOI @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">TOI AVG @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        case "4":
                        <table id="cm-customer-new" class="table custom_table table-bordered table-striped jambo_table">
                            <thead class="headings" id="tbl_headings">
                                <tr>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">TOI @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">TOI AVG @DateTime.Now.AddYears(-1).Year</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        default:
                            break;
                    }

                </div>
            </div>
        </div>
    </div>
</div>
<!-- end of accordion -->
@section scripts
{
    <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
    <script src="~/Scripts/custom_search_table.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="~/scripts/datepicker/moment/moment.min.js"></script>
    <script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script><!-- jQuery Sparklines -->
    <script src="~/scripts/vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
    <!-- ECharts -->
    <script src="~/scripts/vendors/echarts/dist/echarts.min.js"></script>
    <script src="~/scripts/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var totalColumn = [
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "className": 'column-title details-control', "bSortable": false }]
            var totalLenCol = 7;
            var totalCifCol = 0;
            switch (@Model.CurrentUser.GroupIdentifier)
            {
                case 1:
                    totalColumn = [
                            { "sName": "REGION", "bSortable": false },
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "className": 'column-title details-control', "bSortable": false }];
                    totalLenCol = 11;
                    totalCifCol = 4;
                    break;
                case 2:
                    totalColumn=  [
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "className": 'column-title details-control', "bSortable": false }];
                    totalLenCol = 10;
                    totalCifCol = 3;
                    break;
                case 3:
                    totalColumn= [
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "bSortable": false },
                            { "sName": "INFO", "className": 'column-title details-control', "bSortable": false }];
                    totalLenCol = 9;
                    totalCifCol = 2;
                    break;
                default:
                    break;
            }
            var table = $('#cm-customer-new').DataTable({
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                //rowsGroup: [0, 1, 2, 3],
                "sAjaxSource": '@Url.Action("CustomerLowValueData", "CustomerManager")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                "aoColumns": totalColumn,
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                    $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                    $('td', nRow).eq(totalLenCol).attr('id', 'td_' + iDataIndex + '_action');
                    //$('td', nRow).eq(6).attr('class', 'td_action');
                },
                "aoColumnDefs": [{
                    "aTargets": [totalLenCol],
                    "mRender": function (data, type, full) {
                        return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[totalCifCol] + '\');\"><i class="fa fa-info"></i></a><a class=\"btn btn-primary btn-xs show_detail_row\" \"><i class="fa fa-plus-square"></i></a>';
                    }
                }],
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        switch (column.context[0].aoHeader[0][column.index()].cell.innerText) {
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper())':
                                createFilterRegion(column, '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone)');
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader)':
                                createFilterDate(column,  moment().subtract(30, 'days'),moment());
                                break;
                            case '@SMECustomerWebsite.Core.Resources.Resource.CusStatus.ToUpper()':
                                createFilterStatus(column,'cust_status_search');
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.CustBusinessStatus.ToUpper())':
                                createFilterStatus(column,'business_status_search');
                                break;
                            case '@Html.Raw(@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper())':
                                createFilterBranch(column);
                                break;
                            default:
                                if (column.index() < totalLenCol) {
                                    createFilterInputText(column);
                                }
                                break;
                        }
                    });
                },
                "drawCallback": function (settings) {
                    $('table.custom_table th').removeClass().addClass('column-title');
                }
            });

            $('#cm-customer-new').on('click', 'td.details-control .show_detail_row', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    $('tr td a.show_detail_row i').removeClass('fa-minus-square');
                    $('tr td a.show_detail_row i').addClass('fa-plus-square');
                }
                else {
                    // Open this row
                    var dataRow = row.data();
                    var detail = row.child(format(row.data())).show();

                    var id = 'sparkline' + dataRow[totalLenCol] +''

                    $.ajax({
                        url: '@Url.Action("CustomerToiInfoData", "CustomerManager")',
                        type: "POST",
                        data: { cif: dataRow[totalLenCol] },
                        success: function (data_response) {
                            var echartBar = echarts.init(document.getElementById(id));
                            var milli = data_response.custToiInfo.Month.replace(/\/Date\((-?\d+)\)\//, '$1');
                            var d = new Date(parseInt(milli));
                            echartBar.setOption({
                                title: {
                                    text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerTitleChart'),
                                    subtext: ''
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['TOI']
                                },
                                toolbox: {
                                    show: false
                                },
                                calculable: false,
                                xAxis: [{
                                    type: 'category',
                                    data: [
                                    convertDate(d.setMonth(d.getMonth()-11)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1)),
                                    convertDate(d.setMonth(d.getMonth()+1))]
                                }],
                                yAxis: [{
                                    type: 'value'
                                }],
                                series: [{
                                    name: 'TOI',
                                    type: 'line',
                                    data: [data_response.custToiInfo.Month1, data_response.custToiInfo.Month2, data_response.custToiInfo.Month3,data_response.custToiInfo.Month4,data_response.custToiInfo.Month5,data_response.custToiInfo.Month6,data_response.custToiInfo.Month7,data_response.custToiInfo.Month8,data_response.custToiInfo.Month9,data_response.custToiInfo.Month10,data_response.custToiInfo.Month11,data_response.custToiInfo.Month12],
                                    markPoint: {
                                        itemStyle:{
                                            normal:{
                                                label:{
                                                    textStyle: {
                                                        color: '#000'
                                                    },
                                                    formatter:  function(params) {
                                                        if (params.value.length > 1) {
                                                            return params.value[1].toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                                        } else {
                                                            return params.value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                                        }
                                                    }
                                                }
                                            }
                                        },
                                        data: [{
                                            type: 'max',
                                            name: 'max'
                                        }, {
                                            type: 'min',
                                            name: 'min'
                                        }]
                                    },
                                    markLine: {
                                        itemStyle:{
                                            normal:{
                                                label:{
                                                    formatter:  function(params) {
                                                        if (params.value.length > 1) {
                                                            return params.value[1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                                        } else {
                                                            return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                                        }
                                                    }
                                                }
                                            }
                                        },
                                        data: [{type : 'average', name: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerAvg')}, [
                                      { name: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerBenchMark'), value: 1000000, xAxis: convertDate(d.setMonth(d.getMonth()-11)), yAxis: 1000000 },      // When xAxis is the category axis, value 1 will be understood as the index of the category axis. By xAxis: -1 | MAXNUMBER, markLine can reach the edge of the grid.
                                      { name: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.LowValueCustomerBenchMark'), xAxis: convertDate(d.setMonth(d.getMonth()+11)), yAxis: 1000000 },          // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text.
                                        ]]
                                    }
                                }]
                            });
                        }
                    })
                }

                tr.addClass('shown');
                $('tr.shown td a.show_detail_row i').removeClass('fa-plus-square');
                $('tr.shown td a.show_detail_row i').addClass('fa-minus-square');
            });
            function format(d) {
                // `d` is the original data object for the row
                return '<table class="table table-child"  cellpadding="5" cellspacing="0" border="0">' +
                    '<tr>' +
                        '<td><div id="sparkline' + d[totalLenCol] + '" class="sparkline' + d[totalLenCol] + ' graph" style="height: 350px;"><canvas width="200" height="350" style="display: inline-block; vertical-align: top; width: 94px; height: 350px;"></canvas></div></td>' +
                    '</tr>' +
                '</table>';
            }
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getMonth()+1), d.getFullYear()].join('/');
            }
        })
    </script>
    @if (true)
    {
        <script type="text/javascript">
            function startPageTourGuide() {
                var intro = introJs();
                var steps = [
                        {
                            element: '#cm-customer-new',
                            intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTable',
                            position: 'bottom'
                        },
                        {
                            element: '#cm-customer-new_length',
                            intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableLength',
                            position: 'right',
                        },
                        {
                            element: '#tbl_headings',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableSearch",
                            position: 'bottom'
                        },
                        {
                            element: '#cm-customer-new_info',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableInfo",
                            position: 'bottom'
                        },
                        {
                            element: '#cm-customer-new_paginate',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTablePaginate",
                            position: 'left'
                        },
                        {
                            element: '#my_account_planning0',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRow",
                            position: 'bottom'
                        },
                        {
                            element: '#td_0_action',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                            position: 'left'
                        }
                ];
                intro.setOptions({
                    steps: steps,
                    showProgress: true,
                    scrollToElement: true,
                });
                intro.setOption('tooltipPosition', 'auto');
                intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
                intro.start();
            }
        </script>
    }
}